<template>
	<view class="container">
		123123123
		
		<map class="map" :latitude="latitude" :longitude="longitude" :scale="scale" @init="mapInit"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 34.67913510873331,
				longitude: 113.85976584889124,
				scale: 16, // 缩放级别
				map: null, // 用于存储地图实例
			};
		},
		methods: {
			async mapInit(map) {
				this.map = map;
				// 初始化地图完成后，可以在这里调用地图相关方法，如添加多边形
				this.addPolygon();
			},
			addPolygon() {
				if (this.map) {
					// 创建多边形的坐标数组
					const polygonPoints = [
						[113.86124090444105, 34.67869542273552],
						[113.85875644172506, 34.67753944358532],
						[113.85765586840557, 34.68040695925041],
					];

					// 使用高德地图API添加多边形
					const polygon = new AMap.Polygon({
						path: polygonPoints, // 多边形边界点数组
						strokeColor: '#FF33FF', // 线条颜色
						strokeOpacity: 1, // 线条透明度
						strokeWeight: 3, // 线条宽度
						fillColor: '#17B4FE', // 填充颜色
						fillOpacity: 0.35, // 填充透明度
					});

					this.map.add(polygon);
				}
			},
		},
	};
</script>

<style>
	.map {
		width: 750rpx;
		height: 100vh;
	}
</style>